<script setup lang="ts">
import { ref, reactive } from "vue";
import { useHomeStore } from "@/stores/home/home";
import { VideoPlay, VideoPause } from "@element-plus/icons-vue";
import { ElNotification } from "element-plus";

const homeStore = useHomeStore();
const isPlayed = computed(() => homeStore.isPlayed);
const myAudio = ref();
const url = ref("");
let currentMusic = ref();

const audioConfig = reactive({
  loop: false,
  play: false,
  currenttime: "00:00",
  totaltime: "00:00",
  prsValue: 0,
});

watchEffect(() => {
  if (
    homeStore.playList.length <= 0 ||
    homeStore.playIndex > homeStore.playList.length - 1
  ) {
    url.value = "";
    currentMusic.value = {};
    return;
  }
  url.value = homeStore.playList[homeStore.playIndex].url || "";
  currentMusic.value = homeStore.playList[homeStore.playIndex] || {};
});

// 获取当前播放时间进度
function updateTime(e: any) {
  audioConfig.currenttime = s_to_hs(parseInt(e.target.currentTime));
  suanshu();
}

// 计算音乐进度
function suanshu() {
  let length = (myAudio.value.currentTime / myAudio.value.duration) * 100;
  audioConfig.prsValue = length;
}

//  时长转换
function s_to_hs(s: any) {
  let h: any;
  h = Math.floor(s / 60);
  s = s % 60;
  h += "";
  s += "";
  h = h.length == 1 ? "0" + h : h;
  s = s.length == 1 ? "0" + s : s;
  if (isNaN(h)) {
    return "&infin;";
  }
  return h + ":" + s;
}

// 切换歌曲
function musicChange(num: number) {
  const length = homeStore.playList.length;
  if (num > 0) {
    homeStore.SET_PLAYINDEX(
      homeStore.playIndex + 1 >= length ? 0 : homeStore.playIndex + 1
    );
  } else {
    homeStore.SET_PLAYINDEX(
      homeStore.playIndex - 1 < 0 ? length - 1 : homeStore.playIndex - 1
    );
  }
  homeStore.SET_PLAYSTATUS(true);
}

onMounted(() => {
  homeStore.SET_PLAYSTATUS(myAudio.value.paused ? false : true);
});

// 监听播放
function onChange(e: any) {
  myAudio.value.currentTime = Math.round((e / 100) * myAudio.value.duration);
  myAudio.value.play();
  audioConfig.play = false;
}

// 格式化提示
const formatTooltip = () => {
  return audioConfig.currenttime;
};

// 清空播放列表
const clearSonglist = () => {
  homeStore.SET_PLAYSTATUS(false);
  homeStore.SET_PLAYLIST([]);
  homeStore.SET_PLAYINDEX(0);
  ElNotification({
    title: "提示",
    message: "清空播放列表成功！",
    type: "success",
  });
};

const playerStutas = (bl: boolean) => {
  homeStore.SET_PLAYSTATUS(bl);
};

watch(
  () => isPlayed.value,
  (playing) => {
    nextTick(() => {
      const $myAudio = myAudio.value;
      if ($myAudio) {
        playing ? $myAudio.play() : $myAudio.pause();
      }
    });
  }
);
</script>

<template>
  <div class="home-footer">
    <div class="album-info">
      <el-image
        :src="
          JSON.stringify(currentMusic) !== '{}' ? currentMusic.album.picUrl : ''
        "
        fit="cover"
      >
        <template #error>
          <div class="error-image">
            <i class="iconfont icon-changpian"></i>
          </div>
        </template>
      </el-image>
      <span>
        <span class="song_title" :title="currentMusic.name || ''">{{
          currentMusic.name || ""
        }}</span>
        <span class="song_name">
          <!--- 返回的数据里用户的uid有可能为0 --->
          <router-link
            v-for="(item, key) in currentMusic.singer || []"
            :key="item.id"
            :to="{ path: '/singer', query: { id: item.id } }"
            >{{ item.name }}
          </router-link>
        </span>
      </span>
    </div>
    <div class="slider">
      <div class="tool-slider">
        <span>{{ audioConfig.currenttime }}</span>
        <el-slider
          v-model="audioConfig.prsValue"
          @input="onChange"
          @change="onChange"
          size="small"
          :format-tooltip="formatTooltip"
        />
        <span>{{ currentMusic.duration || "00:00" }}</span>
      </div>
      <p>
        <span class="tool">
          <i class="iconfont icon-shangyishou" @click="musicChange(0)"></i>
        </span>
        <span class="tool">
          <el-icon
            :size="30"
            v-if="!homeStore.isPlayed"
            @click="playerStutas(true)"
          >
            <VideoPlay></VideoPlay>
          </el-icon>
          <el-icon
            :size="30"
            v-if="homeStore.isPlayed"
            @click="playerStutas(false)"
          >
            <VideoPause></VideoPause>
          </el-icon>
        </span>
        <span class="tool">
          <i class="iconfont icon-xiayishou" @click="musicChange(1)"></i>
        </span>
      </p>
    </div>
    <audio
      @timeupdate="updateTime"
      @ended="musicChange(1)"
      :src="url || ''"
      autoplay
      ref="myAudio"
    ></audio>
    <span class="music-tool">
      <el-popover placement="top-end" :width="500" trigger="click">
        <template #reference>
          <i class="iconfont icon-bofangliebiao"></i>
        </template>
        <div class="clear-list">
          <h3>
            播放列表 <span>共（ {{ homeStore.playList.length }} ）首</span>
          </h3>
          <span class="clear" @click="clearSonglist">
            <span>
              <i class="iconfont icon-shanchu"></i>
            </span>
          </span>
        </div>
        <song-list :songList="homeStore.playList" typeSize="mini"></song-list>
      </el-popover>
    </span>
  </div>
</template>

<style scoped lang="scss">
.clear-list {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin: 10px 0px;
  display: flex;
  align-items: center;
  h3 {
    span {
      padding-left: 10px;
      font-size: var(--el-font-size-small);
    }
  }
  .clear {
    cursor: pointer;
    display: flex;
    align-items: center;
    .iconfont {
      font-size: 25px;
      font-weight: 100;
      color: var(--el-text-color-regular);
      &:hover {
        color: var(--el-color-primary);
      }
    }
  }
}
.home-footer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .album-info {
    display: flex;
    align-items: center;
    flex-basis: 200px;
    width: 200px;
    .el-image {
      height: 45px;
      width: 45px;
      border-radius: 10px;
      .error-image {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background: var(--el-fill-color-light);
        color: var(--el-text-color-secondary);
        .iconfont {
          font-size: 30px;
          font-weight: 100;
        }
      }
    }
    span {
      cursor: pointer;
      margin-left: 5px;
      font-size: var(--el-font-size-base);
    }
    > span {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .song_title {
      width: 140px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: var(--el-font-size-base);
      color: var(--el-text-color-primary);
      &:hover {
        color: var(--el-color-primary);
      }
    }
    .song_name {
      width: 140px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      a {
        color: var(--el-text-color-regular);
        font-size: var(--el-font-size-small);
        &:hover {
          color: var(--el-color-primary);
        }
        &:not(:last-child)::after {
          content: " / ";
        }
      }
    }
  }

  .slider,
  .music-tool {
    flex-basis: 200px;
    width: 200px;
    color: var(--el-text-color-regular);
    cursor: pointer;
    i {
      font-weight: 200;
      font-size: 27px;
      &:hover {
        color: var(--el-color-primary);
      }
    }
  }
  .slider {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .tool-slider {
      width: 100%;
      display: flex;
      align-items: center;
      margin-top: 10px;

      span {
        padding: 0px 10px;
        color: var(--el-text-color-regular);
        font-size: var(--el-font-size-small);
      }
    }

    p {
      margin-bottom: 10px;

      .tool {
        padding: 0px 10px;
        .iconfont {
          font-size: 35px;
          color: var(--el-text-color-regular);
          cursor: pointer;
          &:hover {
            color: var(--el-color-primary);
          }
        }
      }
    }
  }
  .music-tool {
    text-align: right;
  }
}
.el-slider--small {
  height: 10px;
}
</style>
